<!-- 考勤统计(个人) -->
<template>
	<view>
		<!-- 头像行 -->
		<view class="activeRow"><image class="active" v-if="indexData.avatar" :src="indexData.avatar"></image></view>
		<view style="text-align: center;">{{ indexData.nickname }}</view>
		<!-- 统计行 -->
		<view class="statisticsRow">
			<view class="statusItem" @click="goList('1')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.cq_count}}</view>
				<view>出勤</view>
			</view>
			<view class="statusItem" @click="goList('2')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.cd_count}}</view>
				<view>迟到</view>
			</view>
			<view class="statusItem" @click="goList('3')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.zt_count}}</view>
				<view>早退</view>
			</view>
			<view class="statusItem" @click="goList('4')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.kg_count}}</view>
				<view>旷工</view>
			</view>
			<view class="statusItem" @click="goList('5')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.bk_count}}</view>
				<view>缺卡</view>
			</view>
			<view class="statusItem" @click="goList('6')">
				<view style="font-size: 38rpx; font-weight: 700;">{{indexData.qj_count}}</view>
				<view>请假</view>
			</view>
		</view>
		<!-- 日历行 -->
		<view class="dateRow">
			<uni-calendar
				:insert="true"
				:lunar="false"
				:selected="calendarArr"
				@change="changes"
				@monthSwitch="changeMounth"
			></uni-calendar>
		</view>
		<!-- 打卡流程 -->
		<view class="punchSetp">
			<view v-if="punchDetails.is_holiday==1 && punchDetails.morning.is_record==0 && punchDetails.afternoon.is_record==0" style="color: #666;margin-right: 30rpx;">节假日</view>
			<view v-else>
				<!-- 上班打卡 -->
				<view class="MyStep">
					<view  :class="punchDetails.morning.area_name ? 'lineHeight' : 'stepLine'"></view>
					<view class="stepRow1">
						<image
							class="stepIdot"
							src="../../../static/images/icon_jd1@2x.png"
							mode=""
						></image>
						<text class="stepdate">上班时间</text>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ punchDetails.morning.work_shift }}
						</text>
					</view>
					<!-- 打卡地点 -->
					<view class="stepRow1" v-if="punchDetails.morning.area_name" style="margin-top: 20rpx;">
						<uni-icons style="margin-left:80rpx" color="#139cff" type="location-filled" size="18"></uni-icons>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ punchDetails.morning.area_name }}
						</text>
					</view>
					<view class="stepRow2">
						<view v-if="punchDetails.morning.is_leave == '1'">
							<view>
								<text
									class="stepusername"
									style="margin-right: 10rpx; margin-left: 50rpx;"
								>
									{{ '请假中,无需打卡' }}
								</text>
						
								<text
									style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
								>
									请假
								</text>
							</view>
						</view>
						<view v-else>
							<view v-if="punchDetails.morning.is_record=='1'">
								<text
									class="stepusername"
									style="margin-right: 10rpx; margin-left: 50rpx;"
								>
									{{ '打卡时间' }}
								</text>
								<text class="stepusername" style="margin-right: 20rpx;">
									{{ punchDetails.morning.add_time }}
								</text>
								<text
									style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
									v-if="punchDetails.morning.type=='1' || punchDetails.morning.type=='6'"
								>
									正常
								</text>
								<text
									style="color:#fc726e; border-color: #fc726e;"
									class="statusTag"
									v-if="punchDetails.morning.type=='2'"
								>
									迟到
								</text>
								<text
									style="color:#fc726e; border-color: #fc726e;"
									class="statusTag"
									v-if="punchDetails.morning.type=='5'"
								>
									早退
								</text>
								<text
									style="color:#4CD964; border-color: #4CD964; margin-right: 20rpx;"
									class="statusTag"
									v-if="punchDetails.morning.is_outwork=='1'"
								>
									外勤
								</text>
							</view>
							<view v-else>
								<view v-if="punchDetails.morning.card_missing=='1'" class="waitPunch" v-else>缺卡</view>
								<view v-else class="waitPunch" v-else>无打卡记录</view>
							</view>
							
						</view>
					</view>
				</view>
				<!-- 下班打卡 -->
				<view class="MyStep" style="margin-top: 100rpx;">
					<view class="stepRow1">
						<image
							class="stepIdot"
							src="../../../static/images/icon_jd1@2x.png"
							mode=""
						></image>
						<text class="stepdate">下班时间</text>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ punchDetails.afternoon.closing_time }}
						</text>
					</view>
					<!-- 打卡地点 -->
					<view class="stepRow1" v-if="punchDetails.afternoon.area_name" style="margin-top: 20rpx;">
						<uni-icons style="margin-left:80rpx" color="#139cff" type="location-filled" size="18"></uni-icons>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ punchDetails.afternoon.area_name }}
						</text>
					</view>
					<view class="stepRow2">
						<view v-if="punchDetails.afternoon.is_leave == '1'">
							<view>
								<text
									class="stepusername"
									style="margin-right: 10rpx; margin-left: 50rpx;"
								>
									{{ '请假中,无需打卡' }}
								</text>
						
								<text
									style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
								>
									请假
								</text>
							</view>
						</view>
						<view v-else>
							<view v-if="punchDetails.afternoon.is_record=='1'">
								<text
									class="stepusername"
									style="margin-right: 10rpx; margin-left: 50rpx;"
								>
									{{ '打卡时间' }}
								</text>
								<text class="stepusername" style="margin-right: 20rpx;">
									{{ punchDetails.afternoon.add_time }}
								</text>
								<text
									style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
									v-if="punchDetails.afternoon.type=='1' || punchDetails.afternoon.type=='6'"
								>
									正常
								</text>
								<text
									style="color:#fc726e; border-color: #fc726e;"
									class="statusTag"
									v-if="punchDetails.afternoon.type=='2'"
								>
									迟到
								</text>
								<text
									style="color:#fc726e; border-color: #fc726e;"
									class="statusTag"
									v-if="punchDetails.afternoon.type=='5'"
								>
									早退
								</text>
								<text
									style="color:#4CD964; border-color: #4CD964; margin-right: 20rpx"
									class="statusTag"
									v-if="punchDetails.morning.is_outwork=='1'"
								>
									外勤
								</text>
							</view>
							<view v-else>
								<view v-if="punchDetails.afternoon.card_missing=='1'" class="waitPunch" >缺卡</view>
								<view v-else class="waitPunch" v-else>无打卡记录</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user_id:'',
			token: '',
			member_id: '',
			company_id: '',
			nickname: '',
			avatarUrl: '',
			// 按月统计详情
			indexData: {},
			// 签到详情
			punchDetails: {
				morning:{
					area_name:'',
					work_shift:'',
					add_time:''
				},
				afternoon:{
					closing_time:'',
					area_name:'',
					add_time :''
				}
			},
			selectedDate: '',
			selectedMounth: '',
			calendarArr: [
				{
					date: '2021-07-18',
					info: '异常',
					data: { custom: '自定义信息', name: '自定义消息头' }
				}
			]
		};
	},
	onLoad(options) {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		// this.nickname = uni.getStorageSync('btlh_process_nickname') || '';
		// this.avatarUrl = uni.getStorageSync('btlh_process_avatarUrl') || '';
		this.user_id = options.user_id || this.member_id;
		this.getUserIndex()
		this.getPunchDetails()
	},
	methods: {
		goList(val){
			uni.navigateTo({
				url:`/packageAdmin/pages/punchCard/attendanceList?type=${val}&month=${this.selectedMounth}&user_id=${this.user_id}`
			})
		},
		// 获取个人统计首页
		async getUserIndex(){
			const { data: res } = await this.$myRequest({
				url: 'ClockInStatistics/index',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					
					user_id:this.user_id,
					month:this.selectedMounth,
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.indexData = res.datas;
			console.log('个人统计首页详情',this.indexData)
			this.calendarArr = this.indexData.data_status || []
		},
		// 获取打卡详情
		async getPunchDetails(){
			const { data: res } = await this.$myRequest({
				url: 'ClockInStatistics/sign_detail',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					user_id:this.user_id,
					
					day:this.selectedDate,
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.punchDetails = res.datas;
			console.log('个人签到详情',this.punchDetails)
		},
		// 月份变动
		changeMounth(data){
			console.log('123',data)
			this.selectedMounth = data.year + '-' + data.month
			this.getUserIndex()
		},
		// 点击选择日期变动
		changes(data){
			this.selectedDate = data.fulldate
			console.log('123123',this.selectedDate)
			this.getPunchDetails()
		},
	}
};
</script>

<style lang="scss" scoped>
.activeRow {
	width: 150rpx;
	height: 150rpx;
	margin: 30rpx auto 20rpx;
	.active {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
.statisticsRow {
	display: flex;
	margin-top: 30rpx;
	margin-bottom: 80rpx;
	justify-content: space-around;
	color: #fdbc76;
	font-size: 26rpx;
	.statusItem {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
/deep/.uni-calendar__backtoday {
	display: none;
}
.dateRow{
	width: 95%;
	margin: 0 auto;
	border: 1px solid #efefef;
	border-radius: 50rpx;
	box-shadow: 0px 0px 9px 0px rgba(3, 70, 126, 0.14);
	/deep/.uni-calendar-item__weeks-box-item{
		height: 75rpx;
	}
	/deep/.uni-calendar__weeks-day{
		height: 35px;
	}
	/deep/.uni-calendar__content{
		border-radius: 50rpx;
		position: relative;
		.uni-calendar__header{
			z-index: 20;
			position: absolute;
			border-radius: 20rpx;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 380rpx;
			border-bottom: none;
			background-color: #f38a1b;
			.uni-calendar__header-text {
				color: #fff;
			}
			.uni-calendar__header-btn{
				border-color: #fff;
			}
		}
		.uni-calendar__box{
			padding-top: 50rpx;
		}
	}
	
	
}
.punchSetp {
	display: flex;
	// justify-content: center;
	padding-left: 50rpx;
	margin-top: 100rpx;
	.MyStep {
		position: relative;
		.stepLine {
			position: absolute;
			width: 2px;
			height: 222rpx;
			left: 12rpx;
			top: 22rpx;
			background-color: #40a0f2;
		}
		.lineHeight {
			position: absolute;
			width: 2px;
			height: 280rpx;
			left: 12rpx;
			top: 22rpx;
			background-color: #40a0f2;
		}

		.stepRow1 {
			display: flex;
			align-items: center;
			.stepIdot {
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
			}
			.stepdate {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;
			}
		}
		.waitPunch {
			color: #999;
			font-size: 26rpx;
			margin-left: 50rpx;
		}
		.stepRow2 {
			height: 84rpx;
			display: flex;
			align-items: center;
			.stepusername {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				font-size: 36rpx;
				font-weight: 700;
			}
			.statusTag {
				border: 1rpx solid;
				padding: 0 10rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
			}
			.stepstatus {
				margin: 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #19af3c;
			}
		}
	}
}
</style>
